<div class="api-doc-component">
  <h2 class="title">
    <a
      [routerLink]=""
      fragment="{{apiDocs.className}}" ngbdFragment
      title="Anchor link to: {{apiDocs.className}}"
    >
      <img src="img/link-symbol.svg" alt="Anchor link to: {{apiDocs.className}}"/>
    </a>
    <span>{{apiDocs.className}}</span>
    <a
      class="github-link"
      (click)="trackSourceClick()"
      href="https://github.com/ng-bootstrap/ng-bootstrap/tree/master/{{apiDocs.fileName}}"
      target="_blank"
      title="Link to Github: {{apiDocs.className}}"
    >
      <img src="img/github.svg" alt="Link to Github {{apiDocs.className}}"/>
    </a>
  </h2>
  <ngbd-api-docs-badge [type]="apiDocs.type"></ngbd-api-docs-badge>
  <p class="lead">
    {{apiDocs.description}}
  </p>

  <section>
    <h4>Selector <small><code>{{apiDocs.selector}}</code></small></h4>
    <h6 *ngIf="apiDocs.exportAs">Exported as <small><code>{{apiDocs.exportAs}}</code></small></h6>
  </section>

  <ng-template [ngIf]="apiDocs.inputs.length">
    <section>
      <h4>Inputs</h4>
      <table class="table table-sm">
        <tbody>
        <tr *ngFor="let input of apiDocs.inputs">
          <td class="label-cell"><code>{{input.name}}</code></td>
          <td class="content-cell">
            <p class="description">{{ input.description }}</p>
            <div class="meta">
              <div>
                <i>Type: </i><code>{{ input.type }}</code>
              </div>
              <div *ngIf="defaultInputValue(input) || hasConfigProperty(input)">
                <span><i>Default value: </i><code>{{ defaultInputValue(input) || '-' }}</code></span>
                <span *ngIf="hasConfigProperty(input)">&mdash; initialized from {{ configServiceName }} service</span>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </section>
  </ng-template>

  <ng-template [ngIf]="apiDocs.outputs.length">
    <section>
      <h4>Outputs</h4>
      <table class="table table-sm">
        <tbody>
          <tr *ngFor="let output of apiDocs.outputs">
            <td class="label-cell"><code>{{output.name}}</code></td>
            <td class="content-cell">{{output.description}}</td>
          </tr>
        </tbody>
      </table>
    </section>
  </ng-template>

  <ng-template [ngIf]="apiDocs.methods.length && apiDocs.exportAs">
    <section>
      <h4>Methods</h4>
      <table class="table table-sm">
        <tbody>
          <tr *ngFor="let method of apiDocs.methods">
            <td class="label-cell"><code>{{method.name}}</code></td>
            <td class="content-cell">
                <p>
                    <code>{{methodSignature(method)}}</code>
                    <small class="text-muted" title="Return type">=&gt; {{ method.returnType }}</small>
                </p>
                <p>{{ method.description }}</p>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
  </ng-template>
</div>
